<template>
  <div>
    <el-row>
      <el-col :span="16">
        <el-form ref="form" :model="form" :inline="true" style="text-align: left;height: 38px">
          <el-form-item lable="名称">
            <el-input v-model="form.filter.kwd" placeholder="请输入中心名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click.native="onSubmit"><i class="el-icon-search"></i>查询
            </el-button>
            <el-button v-if="$utils.ckUIPower('S01030101')" @click="openEditDialog"><i
              class="el-icon-plus"></i>新增
            </el-button>
          </el-form-item>
        </el-form>
      </el-col>

      <el-col :span="8">
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.pageNumber"
            :page-sizes="[10, 20, 30]"
            :page-size="10"
            layout="total, prev, pager, next, jumper"
            :total="page.totalRow">
          </el-pagination>
        </div>
      </el-col>
    </el-row>

    <div>
      <el-table stripe
                v-loading="loading"
                element-loading-text="数据加载中"
                :data="page.list"
                style="width:100%"
                @sort-change="onSubmit"
                border>
        <el-table-column
          inline-template
          label="序号"
          width="80"
          align="center">
          <span>{{$index+1+((page.pageNumber-1)*page.pageSize)}}</span>
        </el-table-column>
        <el-table-column
          property="name"
          label="中心名称"
          sortable="custom"
          width="150"
          align="center">
        </el-table-column>
        <el-table-column
          label="简称"
          property="shortName"
          sortable="custom"
          width="150"
          align="center">
        </el-table-column>
        <el-table-column
          label="负责人"
          property="respo"
          width="150"
          align="center">
        </el-table-column>
        <el-table-column
          label="联系电话"
          property="telephone"
          width="150"
          align="center">
        </el-table-column>
        <el-table-column
          property="peopleAmount"
          label="人员数"
          style="white-space:nowrap;"
          align="center">
        </el-table-column>
        <el-table-column
          inline-template
          sortable="custom"
          property="status"
          label="状态"
          align="center">
          <span>
          {{status[row.status]}}
        </span>
        </el-table-column>
        <el-table-column
          inline-template
          label="操作"
          align="center"
          width="250"
          v-if="$utils.ckUIPower('S01010101')"
          >
          <template>
            <el-button type="text" @click.native="openEditDialog(row.id)">编辑</el-button>
            <el-popover
              ref="popover_"
              placement="top"

            >
              <p><i class="el-alert__icon el-icon-warning red vertical-align:middle"></i>确定要{{row.status==1?'停用':'启用'}}吗？</p>
              <div style="text-align: right; margin: 0">
                <el-button type="primary" size="mini" @click.native.prevent="activeSite(row.id);">确定</el-button>
              </div>
            </el-popover>
            <el-button type="text" v-popover:popover_>{{row.status==0?'启用':'禁用'}}</el-button>
            <el-button type="text" v-if="row.status==1" @click.native.prevent="openAddAccount(row)">添加用户</el-button>
            <el-button type="text" v-if="row.status==1" @click.native.prevent="openAddProject(row)">添加项目</el-button>
            <!-- <el-button type="text" v-if="row.status==1" @click.native.prevent="equipment_type(row)">添加设备类型</el-button> -->
          </template>
        </el-table-column>
      </el-table>
    </div>


    <!--新增/修改 中心-->
    <site-add-dialog v-bind:dialog-form-visible="dialogData.show" v-bind:id="id" v-on:closeDialog="closeDialog"></site-add-dialog>

    <!--配置用户-->
    <add-account v-bind:dialog-form-visible="addAccount.show" v-on:closeDialog="closeDialog" :site-id="siteId" :site-name="siteName"></add-account>
    <project-add-dialog :site-id="siteId" :dialog-form-visible="projectAddDialog" v-on:closeDialog="closeDialog"></project-add-dialog>
    <el-dialog title="添加设备类型" :visible.sync="oglFormVisible">
          <div>
           

                      请输入设备名称：<el-input
                        placeholder="请输入设备名称"
                        v-model="equipmentName"
                        clearable>
                      </el-input>
          </div>
          <div slot="footer" class="dialog-footer" style="text-align: right; margin: 0">
            <el-button @click="oglFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="Determiadd()">确 定</el-button>
          </div>
        </el-dialog>
  </div>
</template>
<script>
  import SiteAddDialog from './add.dialog.vue'
  import ProjectAddDialog from '../project/add.dialog.vue'
  import http from '../../../api/http'
  import addAccount from './add.accounts.vue'
  export default {
    data () {
      return {
        oglFormVisible:false,
        oHospitalID:'',
        equipmentName:'',
        loading: true,
        form: {
          filter: {kwd: '', sort: {create_datetime: 'desc'},fieldList:[{field:'status',exp:'=',val:''}]},
          pageNo: 1,
          pageSize: 10
        },
        status: ["禁用", "启用"],
        active: ["禁用", "启用"],
        id: null,
        dialogData: {show: false},
        addAccount: {show: false},
        page: {},
        siteId:'',
        projectAddDialog:false,
        siteName:''
      }
    },
    computed: {},
    methods: {
//      openProjectTable(){
//        this.$confirm('是否要进行项目配置操作?', '提示', {
//          confirmButtonText: '确定',
//          cancelButtonText: '取消',
//          type: 'warning'
//        }).then(() => {
//          this.projectAddDialog = true
//        }).catch(() => {
//          this.projectAddDialog = false
//        });
//      },
      openAddAccount(row){
        this.siteId = row.id;
        this.siteName = row.name;
        this.addAccount.show = true
      },
      openAddProject(row){
        this.siteId = row.id;
        this.siteName = row.name;
        this.projectAddDialog = true
      },
      onSubmit (sortCol) {
        var vm = this;
        if (sortCol && sortCol.prop != undefined && sortCol.prop != '' && sortCol.prop != 'undefined') {
          var sortJson = '{"' + sortCol.prop + '":"' + (sortCol.order == 'descending' ? 'desc' : 'asc') + '"}';
//          console.log(sortJson);
          vm.form.filter.sort = JSON.parse(sortJson);
          vm.form.pageNo = 1;
        }
        vm.loading = true;
        http.postData(vm, "/pt/site/page", {
          json: JSON.stringify(vm.form.filter),
          pageNo: vm.form.pageNo,
          pageSize: vm.form.pageSize
        }, function (resp) {
          var ret = resp.body;
          if (ret.code == '111') {
            vm.page = ret.value;
          }
          vm.loading = false;
        });
      },
      openEditDialog(id_) {
        this.dialogData.show=true;
        if (id_ != undefined && typeof id_ == "string") {
          this.id = id_;
        } else {
          this.id = '';
        }
      },
      closeDialog() {
        this.$set(this.dialogData, 'show', false);
        this.$set(this.addAccount,'show',false);
        this.projectAddDialog=false;
      },
      deleteName (id) {
        var vm = this;
        this.$confirm('确定要删除该中心?', '提示', {
          type: 'warning'
        }).then(() => {
          http.postData(vm, "/pt/site/del/" + id, {}, function (resp) {
            var ret = resp.body;
            if (ret.code === '111') {
              vm.$notify({title: '删除提示', message: ret.msg, type: 'success'});
              vm.onSubmit();
            } else {
              vm.$message({type: 'error', message: ret.msg});
            }
          });
        })
      },
      activeSite (id) {
        var vm = this;
          http.postData(vm, "/pt/site/active/" + id, {}, function (resp) {
            var ret = resp.body;
            if (ret.code === '111') {
              vm.$notify({title: '操作提示', message: ret.msg, type: 'success'});
              vm.onSubmit();
            } else {
              vm.$notify.error({title: '操作提示', message: ret.msg});
            }
          });
      },
      handleSizeChange () {
        this.form.pageNo = 1
        this.onSubmit()
      },
      handleCurrentChange (val) {
        this.form.pageNo = val
        this.onSubmit()
      },
      equipment_type(row){
        //添加设备类型按钮
        var vm=this;
        vm.equipmentName="";
        vm.oglFormVisible=true;
        vm.oHospitalID=row.id;
      },
      Determiadd(){
        //添加设备确定按钮
        var vm=this;
        
        http.postData(vm,'/pt/qrBarCodeValide/addDeviceType',{siteId:vm.oHospitalID,name:vm.equipmentName},function (resp) {
          console.log(resp);
          if(resp.body.code=="111"){
            vm.$message({
                        type: 'success',
                        message: '添加成功!'
                      });
              vm.oglFormVisible=false;

          }else{
            vm.$message({
                message:resp.body.msg,
                type: 'warning'
              });
          }
          

        })
      }
    },
    components: {
      SiteAddDialog,
      ProjectAddDialog,
      addAccount
    },
    created() {
      this.onSubmit();
    }
  }
</script>
<style>
</style>
